<template>
  <view class="pad20">
    <sb-back-icon />
    <u-form :model="form" :label-width="120" class="pad40" ref="uForm">
      <u-form-item label="Original Password" prop="password">
        <u-input
          type="password"
          v-model="form.password"
          placeholder="Original Password"
        />
      </u-form-item>
      <u-form-item label="New Password" prop="newPassword">
        <u-input
          type="password"
          v-model="form.newPassword"
          placeholder="input the new password"
        />
      </u-form-item>
      <u-form-item label="Confirm Password" prop="confirmPassword">
        <u-input
          type="password"
          v-model="form.confirmPassword"
          placeholder="input the new password again"
        />
      </u-form-item>
    </u-form>
    <u-button type="error" @click="submit">Confirm</u-button>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import md5Libs from "uview-ui/libs/function/md5";
export default {
  data() {
    return {
      form: {
        id: "",
        password: "",
        newPassword: "",
        confirmPassword: "",
      },
      rules: {
        password: [
          {
            required: true,
            message: "请输入原始密码",
            trigger: "blur",
          },
          // 异步验证，用途：比如用户注册时输入完账号，后端检查账号是否已存在
          // {
          // 	trigger: ['blur'],
          // 	asyncValidator: (rule, value, callback) => {
          // 		this.$u.post('/ebapi/public_api/index').then(res => {
          // 			if(res.error) {
          // 				callback(new Error('原始密码输入不正确'));
          // 			} else {
          // 				callback();
          // 			}
          // 		})
          // 	},
          // }
        ],
        newPassword: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          {
            required: true,
            message: "请再次输入新密码",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              return value === this.form.newPassword;
            },
            message: "两次输入的密码不相等",
            trigger: "blur",
          },
        ],
      },
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad() {
	  if (!this.$checkLogin()) return this.$redirect2Login();
  },
  methods: {
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          const params = { ...this.form };
          for (let i in params) {
            if (i !== "id") {
              params[i] = md5Libs.md5(params[i]);
            }
          }

          this.$postB("/user/updatePassword", params)
            .then((res) => {
              if (res.success) {
                this.$refs.uToast.show({
                  title: "密码修改成功,请重新登录",
                  type: "success",
                  url: "/pages/main/account/phone-login",
                });
              } else {
                this.$refs.uToast.show({
                  title: res.data || "原密码输入不正确，请重新输入",
                  type: "error",
                });
              }
            })
            // if(success)
            .catch((e) => {
              this.$refs.uToast.show({
                title: "密码修改失败",
                type: "error",
                url: "/pages/user/index",
              });
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
